<template>
	<!--头部搜索组件-->
	<van-form action="" class="search-box">
		<!-- 屏蔽logo -->
		<!-- <div class="search-left">
			<i v-if ="showLogo" class="logo" ></i>
		</div> -->
		<van-search v-model="value" placeholder="" @search="onSearch" @focus='onFocus' @blur="onBlur" :left-icon = "value ? searchActiveIcon: searchIcon"/>
		<div class="search-right">
			<i v-if="!value" @click="onHistory" class="history"></i>
			<span v-else  @click="onCancel">取消</span> 
		</div>
	</van-form>
</template>

<script>
	export default {
		data() {
			return {
				value:'',//搜索内容
				isFocus:false,
				showLogo:true,
				searchIcon:require('../../assets/images/zhxyk/home/search.png'),
				searchActiveIcon:require('../../assets/images/zhxyk/home/search_active.png')
			}
		},
		created() {
			
		},
	
		methods: {
			onSearch(value){
				this.showLogo = !value
				this.isFocus = false
				this.$emit('search',{type:'onSearch',data:value})
			},
			onFocus(){
				this.isFocus = true
				this.showLogo = false
				this.$emit('search',{type:'onFocus',data:'聚焦'})
			},
			onBlur(){
				this.isFocus = false;
				this.showLogo = !this.value;
				this.$emit('search',{type:'onBlur',data:'失去焦点'})
			},
			onCancel(){
               this.value ='';
			   this.showLogo = true;
			   this.$emit('search',{type:'onCancel',data:'取消'})
			},
			onHistory(){
				this.$emit('search',{type:'onHistory',data:'历史记录'})
			}
		},
	};
</script>

<style scoped="scoped">
	.search-box{
		width: 100vw;
		height: 88px;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 25px;
		background: #FFFFFF;
		z-index: 3;
	}
	.van-search{
		flex: 1;
		padding: 11px 20px;
		background: #F7F7F7;
		border-radius: 30px;
	}
	.search-left{
		display: flex;
		align-items: center;
	}
	.search-box /deep/ .van-icon__image{
      height: 28px;
	  width: 28px;
	}
	.search-box /deep/ .van-cell{
		display: flex;
		align-items: center;
	}
	.search-box /deep/ .van-field__control{
        font-size: 26px;
		color: #333333;
	}
	.search-box /deep/ .van-field__left-icon{
         margin-right: 12px;
	}
	.search-box /deep/ .van-field__clear{
		font-size: 30px;

	}
	.logo{
		width: 44px;
        height: 44px;
		margin-right: 20px;
		background: url('../../assets/images/zhxyk/home/logo_icon.png') no-repeat;
		background-size: 100% 100%;
	}
	.search-right{
		display: flex;
		align-items: center;
		margin-left: 20px;
	}
	.history{
		height: 40px;
		width: 40px;
		background: url('../../assets/images/zhxyk/home/history_icon.png') no-repeat;
		background-size: 100% 100%;
	}
	.van-field__control{
		font-size: 26px;
		color: #333333;
	}
	.iconright{
		color: #000000;
		font-weight: 900;
		font-size: 28px;
	}
</style>


